Skip to content

slacrey/vue-aliplayer

Repository files navigation

Vue-AliPlayer

A Vue 2.x video player component based on vue-aliplayer.

Install

npm install vue-aliplayer -S

Usage

import VueAliplayer from 'vue-aliplayer'

export default {
  components: {
    'ali-player': VueAliplayer
  }
}

Props

名称 类型 默认值 说明
aliplayerSdkPath String //g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js 阿里播放器引用地址
playStyle String 播放器自定义样式style
source String 视频播放地址url:1、单独url;2、默认状态,表示使用“vi+playauth3、source播放方式优先级最高
vid String 媒体转码服务的媒体Id
playauth String 播放权证,如何得到可参考:获取playauth
height String 100% 播放器高度,可形如’100%’或者’100px’
width String 320px 播放器宽度,可形如’100%’或者’100px’
cover String 播放器默认封面图片,请填写正确的图片url地址Flash播放器封面也需要开启允许跨域访问
isLive Boolean false 播放内容是否为直播,直播时会禁止用户拖动进度条
autoplay Boolean false 播放器是否自动播放,在移动端autoplay属性会失效
useH5Prism Boolean false 指定使用H5播放器
useFlashPrism Boolean false 指定使用Flash播放器
playsinline Boolean false H5是否内置播放,有的Android浏览器不起作用
format String mp4 指定播放地址格式,只有使用vid+plauth播放方式时支持可选值为'mp4'和'm3u8',默认为'mp4'
x5_type String 'auto' 声明启用同层H5播放器,启用时设置的值为'h5'具体参考同层播放
x5_fullscreen Boolean false 声明视频播放时是否进入到TBS的全屏模式,默认为false具体参考同层播放
x5_video_position String center 声明视频播在界面上的位置,默认为"center" 可选值为:'top','center' 具体参考同层播放
x5_orientation String 声明TBS播放器支持的方向,可选值:landscape:横屏) portraint:竖屏 landscape
autoPlayDelay Number 延迟播放时间,单位为秒具体参考延迟播放
autoPlayDelayDisplayText String 延迟播放提示文本具体参考延迟播放

Method

名称 参数 描述
play none 播放视频
pause none 暂停视频
replay none 重播视频
seek time 跳转到某个时刻进行播放,time的单位为秒
getCurrentTime none 获取当前的播放时刻,返回的单位为秒
getDuration none 获取视频总时长,返回的单位为秒
getVolume none 获取当前的音量,返回值为0-1的实数ios和部分android会失效
setVolume vol 设置音量,vol为0-1的实数,ios和部分android会失效
loadByUrl url,time 直接播放视频url,time为可选值(单位秒)目前只支持同种格式(mp4/flv/m3u8)之间切换,暂不支持直播rtmp流切换
reloaduserPlayInfoAndVidRequestMts vid:视频id playauth:播放凭证 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8)之间切换,暂不支持直播rtmp流切换
setPlayerSize w,h 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
setSpeed speed 设置倍速播放移动端可能会失效,比如android 微信

Events

名称 参数 描述
ready none Triggered when aliplayer is ready
play none Triggered when aliplayer start play
pause none Triggered when aliplayer paused
waiting none Triggered periodically when aliplayer is waiting
ended none Triggered when aliplayer ended playing
liveStreamStop none Triggered when live stream is stop
hideBar none Triggered when control bar is hide

Example:

<ali-player @play="play"></ali-player>

export default {
    methods: {
      play() {
        console.log('play callback')
      }
    }

API

you can use all aliplayer api

Example:

<ali-player :source="视频url" :vid="视频vid" :playauth="播放鉴权" ref="player"></ali-player>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="replay">重播</button>
    <button @click="reload">重载</button>

export default {
    methods: {
      play: function(){
        const player = this.$refs.player.instance
        player && player.play()
      },
      pause: function() {
        const player = this.$refs.player.instance
        player && player.pause()
      },
      replay: function() {
        const player = this.$refs.player.instance
        player && player.replay()
      },
      reload: function() {
        // 修改source地址后
        const player = this.$refs.player
        player && player.reloadPlayer()
      }
    }

Development

  • yarn dev: Run dev in development mode
  • yarn deploy: Deploy dev to gh-pages
  • yarn build:cjs: Build component in commonjs format
  • yarn build:umd: Build component in umd format
  • yarn build: Build component in both format
  • yarn lint: Run eslint

Check out your npm scripts, it's using vbuild under the hood.


Generated by create-vue-app

Refer to vue-dplayer packaging

License

This content is released under the MIT License.

Releases

No releases published

Packages

No packages published